import Layer from '../../core/layer';
import { sliderTpl, initCrop } from '../../templete/sliderTpl'; //图片模版 。。
import { AppDataChange, setLayerClass } from '../../common/AppDataFun.js';
import { blankImg } from '../../conf/set';
import './swiper.js'
import{ setLayerDomAndObj } from '../../templete/basicMoreTpl'

// layer 模板
export function sliderDom(obj) {
    console.log("sliderDomsliderDom",obj)
    var imgHtml =''
    var len =obj.data.src.length
    imgHtml+=`<img style="width:${parseInt(100)/(len+1)}%;height:100%;" src="${obj.data.src[len-1] || 'none'}" />`;
    for(var i=0;i<len;i++){
        imgHtml+=`<img style="width:${parseInt(100)/(len+1)}%;height:100%" src="${obj.data.src[i] || 'none'}" />`
    }

    return `
    <div id="${obj.id || ''}" data-uefun="${obj.ue ? $.escape(obj.ue) : ''}" autoplay="${obj.autoplay}" autoplayTime="${obj.time}"  class="layer layer-slider" style="${$.toStyle(obj.style)};overflow:hidden;">
        <div class="element" style="${$.toStyle(obj.estyle, obj.animate)}"><div class="list" style="width:${(len+1)*100}%;left:-100%;height:100%;overflow:hidden;position:absolute;">${imgHtml}</div></div>
    </div>`;

    if($("body #pageView .layer-slider").attr("autoplay")){
        play()
        $(".slider-box-way span.automatic").addClass("active").siblings().removeClass("active")
    }
}

// layer 原始数据, 用于保存在 AppData里面的数据
export class SliderLayer {
    constructor(animate, data, estyle, style, type, typename,autoplay,time) {
        this.animate = animate || [];
        this.data = data || {
            src: [blankImg,blankImg,blankImg]
        };
        this.estyle = estyle || {};
        this.style = style || {
            width: '200px',
            height: '160px',
            top: '10px',
            left: '10px',
            'z-index': 9999,
            overflow:'hidden'
        };
        this.type = type || 'slider';
        this.color = 'none';
        this.ue = null;
        this.typename = typename || '轮播';
        this.autoplay=autoplay||false,
        this.time=time||3000
    }
}

// Img 类，主要是一些方法实现
export default class Slider extends Layer {
    constructor(layer) {
        super(layer);
        this.$crop = null;
    }

    cropBack(method, val) {
        if (method === 'crop') {
            // 剪切后 重新设置 img 的src
            AppData.edit.layerDom.find('img').attr('src', this.layer.data.src);
        } else if (method === 'reset') {

            // ... 重置图片
            AppData.edit.layerDom.find('img').attr('src', this.layer.data.src);
        } else if (method === 'delete') {
            // 删除图片，在 initCrop 里面已经做了处理了
        } else if (method === 'select') {
            let img = new Image();
            let index =$(".set-swiper .active").index();
            let indexLength =$(".set-swiper .tab").length
            if(index==indexLength){
                AppData.edit.layerDom
                .find('img').eq(0).attr('src', val);
            }
            img.src = val;
            // 重新设置layer 对象
            
            this.layer.data.src.splice(index-1,1,val)
           // this.layer.data.src = val;
            // this.layer.style.width = img.naturalWidth + 'px';
            // this.layer.style.height = img.naturalHeight + 'px';
            this.layer.style.width = parseInt($('#basicTpl_set_width').val())+"px";
            this.layer.style.height = parseInt($('#basicTpl_set_height').val())+"px";
            // 重新设置尺寸
            // AppData.edit.layerDom.css({
            //     width: img.naturalWidth,
            //     height: img.naturalHeight
            // }).find('img').eq(index).attr('src', val);
              AppData.edit.layerDom.css({
                 width: $('#basicTpl_set_width').val(),
                 height:$('#basicTpl_set_height').val()
             }).find('img').eq(index).attr('src', val);
            //$('#basicTpl_set_width').val(img.naturalWidth + 'px');
           // $('#basicTpl_set_height').val(img.naturalHeight + 'px');
        }
        // 重新渲染页面
        AppDataChange();
    }

    // 事件绑定
    initEvent() {
        let self = this;
        // 图片剪切, 因为事件绑定，被外部函数所引用，形成闭包，内存无法释放。以后这里需要做优化
        for(var i=0;i<$(".set-swiper .tab").length;i++){
            let $crop_i = initCrop(this, $('#setStyle').find('.set-slider-crop'+i), {}, this.cropBack.bind(this));
        }
        $.swiper({
            interval:3000,//轮播时间
            // width:AppData.edit.layerDom.width()||200,
            // height:AppData.edit.layerDom.height()||160,
            // len:3
        })
        //tab切换
        let tabI =$(".set-swiper .active").index();
        $(".set-swiper").on("click",".tab",function(){
            if($(this).hasClass("active")){
                return ;
            }
            var index= $(this).index();
            $(this).addClass("active").siblings().removeClass("active")
            $(".slider-box").find(".slider").eq(index-1).show().siblings().hide();
            animateTo($(this).html())
        })
        $(".set-swiper").on("click",".reduce",function(){
            $(".set-swiper .add").css("color","#666");
            let list =$(".layer-slider .element .list");
            let liLength =parseInt($(".set-swiper .tab").length);
            let imgLength =list.find("img").length;
            var index = $(".set-swiper .active").index();
            let newLength=imgLength-1
            if(liLength<=2){
                $(this).css("color","#ccc");
                alert("最少保留2张图片");
                return;
            }
            $(this).css("color","#666");
            if(liLength==index){
                $(".set-swiper").find(".tab").eq(index-2).addClass("active").siblings().removeClass("active")
                $(".slider-box").find(".slider").eq(index-2).show().siblings().hide();
                animateTo(index-1)
            }
            $(".set-swiper").find(".tab").eq(liLength-1).remove();
            $(".slider-box").find(".slider").eq(liLength-1).remove();
            list.width(newLength*100+"%").children("img:last-child").remove();
            let lastImg =list.children("img:last-child").clone();
            //list.children("img:last-child").replaceWith(list.children("img:first-child"))
            list.children("img:first-child").replaceWith(lastImg)
            list.find("img").width(100/newLength+"%")
            getAllImg()
        })
        $(".set-swiper").on("click",".add",function(){
            $(".set-swiper .reduce").css("color","#666");
            let list =$(".layer-slider .element .list");
            let liLength =parseInt($(".set-swiper .tab").length);
            let index = $(".set-swiper .active").index();
            let imgLength =list.find("img").length;
            let newLength=imgLength+1
            let imgHTML =`<img  style="width:'${100/newLength+"%"};height:100%;" src="${blankImg}">`
            if(liLength>5){
                $(this).css("color","#ccc");
                alert("最多可添加6张图片");
                return;
            }
            $(this).css("color","#666");
            $(".set-swiper .add").before( "<li class='tab'>"+(liLength+1)+"</li>")
            $(".set-swiper").find(".tab").eq(index).addClass("active").siblings().removeClass("active")
            $(".slider-box").append(`<div class="slider set-slider-crop${liLength}" data-oldsrc="${blankImg}" data-src="${blankImg}"></div>`);
            for(var i=0;i<$(".set-swiper .tab").length;i++){
                let $crop_i = initCrop(this, $('#setStyle').find('.set-slider-crop'+i), {}, self.cropBack.bind(self));
            }
            $(".slider-box").find(".slider").eq(index).show().siblings().hide();
            animateTo(index+1)        
            list.width(newLength*100+"%").append(imgHTML);
            list.children("img:first-child").replaceWith(imgHTML)
            list.find("img").width(100/newLength+"%").height('100%')
            getAllImg()
            
        })
        //获取所有图片并放存储到本地
        function getAllImg(){
            let imgList = $(".layer-slider .element .list").find("img")
            let imgArr =[]
            imgList.each((index,item)=>{
                if(index!==0){
                    imgArr.push(item.src)
                }
            });
            self.layer.data.src=imgArr;
            AppDataChange();
        }

        //轮播切换方式
        $(".slider-box-way").on("click",'span',function(){
            if($(this).hasClass("active")){
                return ;
            }
           if($(this).hasClass("hand")){
               stop();
               setLayerDomAndObj('sliderlayer', {
                autoplay:false
            }, self)
           }
           if($(this).hasClass("automatic")){
               play();
               setLayerDomAndObj('sliderlayer', {
                autoplay:true
            }, self)

           }
           $(this).addClass("active").siblings("span").removeClass("active")
        })
        // //把切换方式和切换时间保存到本地
        $('#mt-slider-time').off('change').on('change', function(e, val) {
            setLayerDomAndObj('sliderlayer', {
                time:Math.round(val*10)*1000+"s"
            }, self);
    
        });
    
        // 旋转的 input
        $('#mt-slider-input').off('change input').on('change input', function(e) {
    
            let val = Math.round($(this).val());
            // 迭代到后面，如果要对transform 进行扩展，中可能出现BUG，如果 transform 用了其他的值，比如 scale , translate 等 这里就不能这样处理 可以使用 矩阵
            // 设置 dom
            setLayerDomAndObj('sliderlayer', {
                time:val*1000+"s"
            }, self)
        });

    }


    // 模板
    render() {

        let self = this;
        // 图片模板
        let sliderTpls = sliderTpl({
            src: self[self.className].data.src || ['blankImg','blankImg','blankImg']
        })
        var { basicTpls, bgColorTpls, basicMoreTpls } = this._getSetBoxTpl();

        // 编辑区域
        $('#setStyle').html(basicTpls + sliderTpls + bgColorTpls + basicMoreTpls);
    }

    // 初始化
    init() {

        // 初始化 公用模块
        this._init();
        // 控制tab head 显示隐藏
        // this.setLayerTabHead();

        // 初始化设置区域
        this.render();

        // 设置区域事件绑定，事件绑定在 render 之后执行
        this._initEvent();
        this.initEvent();

        // console.log('layer::img 11 =>', this);
        setLayerClass(this);


    }

}